<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>悬停按钮</title>
  <link rel="stylesheet" href="global.css">
  <style>
    /* 太妙了，使我感觉没学过css一样 */
    @import url('https://fonts.googleapis.com/css?family=Mukta:700');

    body {
      min-height: 100vh;
      background: #f3f8fa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Mukta", sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      margin: 0;
    }

    /* 以下为自定义样式 */
    *::before {
      box-sizing: border-box;
    }

    button {
      position: relative;
      display: inline-block;
      cursor: pointer;
      outline: none;
      border: 0;
      vertical-align: middle;
      text-decoration: none;
      background: transparent;
      padding: 0;
      font-size: inherit;
      font-family: inherit;
    }

    /* 整个按钮宽度为10rem */
    button.learn-more {
      width: 10rem;
      height: auto;
    }

    /* 圆球样式 带过渡效果*/
    button.learn-more .circle {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: relative;
      display: block;
      margin: 0;
      width: 3rem;
      height: 3rem;
      background: #282936;
      border-radius: 1.625rem;
    }

    /* top:0;bottom:0;margin:auto;使其定位垂直居中 */
    button.learn-more .circle .icon {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #fff;
    }

    /* 同样选择箭头区域 权重更高 设置 background: none;使箭柄部分默认不显示*/
    button.learn-more .circle .icon.arrow {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      left: 0.625rem;
      width: 1.125rem;
      height: 0.125rem;
      background: none;
    }

    /* 通过边框巧妙模拟箭头效果 */
    button.learn-more .circle .icon.arrow::before {
      position: absolute;
      content: "";
      top: -0.25rem;
      right: 0.0625rem;
      width: 0.625rem;
      height: 0.625rem;
      border-top: 0.125rem solid #fff;
      border-right: 0.125rem solid #fff;
      transform: rotate(45deg);
    }

    button.learn-more .button-text {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0.75rem 0;
      margin: 0 0 0 1.85rem;
      color: #282936;
      font-weight: 700;
      line-height: 1.6;
      text-align: center;
      text-transform: uppercase;
    }

    /* 当鼠标悬停时 圆球变长填满整个区域 */
    button:hover .circle {
      width: 100%;
    }

    button:hover .circle .icon.arrow {
      background: #fff;
    }

    button:hover .button-text {
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="container">
    <button class="learn-more">
      <!-- 
        把 aria-hidden="true" 加到元素上会把该元素和它的所有子元素从可访问性树上移除。
        这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：
          纯装饰性的内容，如图标、图片
          重复的内容，如重复的文本
          屏幕外或被折叠的内容，如菜单
       -->
      <span class="circle" aria-hidden="true">
        <span class="icon arrow"></span>
      </span>
      <a href="https://codepen.io/kathykato/pen/rZRaNe">
        <span class="button-text">来源网站</span></a>
    </button>
  </div>
</body>

</html>